<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- https://www.npmjs.com/package/xlsx -->
<!-- https://docs.sheetjs.com/docs/getting-started/installation/standalone -->

<!-- use version 0.20.1 -->
<!--<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>-->

<script type="module">
    import {read, writeFileXLSX, utils} from "https://cdn.sheetjs.com/xlsx-0.20.1/package/xlsx.mjs";

    console.log('read:', read);
    console.log('writeFileXLSX:', writeFileXLSX);
    console.log('utils:', utils);
    /*book_append_sheet : ƒ book_append_sheet(wb/!*:Workbook*!/, ws/!*:Worksheet*!/, name/!*:?string*!/, roll/!*:?boolean*!/)/!*:string*!/ { var i = 1; if(!name) for(; i <= 0xFFFF; ++i, name = undefined) if(wb.SheetNames.indexOf(name = "Sheet" + i) == -1) break; if(!name || wb.SheetNames.length >= 0xFFFF) throw new Error("Too many worksheets"); if(roll && wb.SheetNames.indexOf(name) >= 0)
    book_new : ƒ ()
    book_set_sheet_visibility : ƒ
    book_set_sheet_visibility(wb/!*:Workbook*!/, sh/!*:number|string*!/, vis/!*:number*!/)
    cell_add_comment : ƒ cell_add_comment(cell/!*:Cell*!/, text/!*:string*!/, author/!*:?string*!/)
    cell_set_hyperlink : ƒ cell_set_hyperlink(cell/!*:Cell*!/, target/!*:string*!/, tooltip/!*:?string*!/)
    cell_set_internal_link : ƒ cell_set_internal_link(cell/!*:Cell*!/, range/!*:string*!/, tooltip/!*:?string*!/)
    cell_set_number_format : ƒ cell_set_number_format(cell/!*:Cell*!/, fmt/!*:string|number*!/)
    consts : {SHEET_VISIBLE: 0, SHEET_HIDDEN: 1, SHEET_VERY_HIDDEN: 2}
    decode_cell : ƒ decode_cell(cstr/!*:string*!/)/!*:CellAddress*!/ { var R = 0, C = 0; for(var i = 0; i < cstr.length; ++i)
    decode_col : ƒ ()
    decode_range : ƒ ()
    decode_row : ƒ ()
    encode_cell : ƒ ()
    encode_col : ƒ ()
    encode_range : ƒ encode_range(cs/!*:CellAddrSpec|Range*!/,ce/!*:?CellAddrSpec*!/)/!*:string*!/ { if(typeof ce === 'undefined' || typeof ce === 'number')
    encode_row : ƒ ()
    format_cell : ƒ format_cell(cell/!*:Cell*!/, v/!*:any*!/, o/!*:any*!/)
    json_to_sheet : ƒ ()
    sheet_add_aoa : ƒ sheet_add_aoa(_ws/!*:?Worksheet*!/, data/!*:AOA*!/, opts/!*:?any*!/)/!*:Worksheet*!/ { var o = opts || {}; var dense = _ws ? (_ws["!data"] != null) : o.dense; if(DENSE != null && dense == null) dense = DENSE; var ws/!*:Worksheet*!/ = _ws || ({}/!*:any*!/); if(dense && !ws["!data"]) ws["!data"] = []; var _R = 0, _C = 0; if(ws && o.origin != null)
    sheet_add_dom : ƒ sheet_add_dom(ws/!*:Worksheet*!/, table/!*:HTMLElement*!/, _opts/!*:?any*!/)/!*:Worksheet*!/ { var rows/!*:HTMLCollection<HTMLTableRowElement>*!/ = table.rows; if(!rows)
    sheet_add_json : ƒ sheet_add_json(_ws/!*:?Worksheet*!/, js/!*:Array<any>*!/, opts)/!*:Worksheet*!/ { var o = opts || {}; var dense = _ws ? (_ws["!data"] != null) : o.dense; if(DENSE != null && dense == null) dense = DENSE; var offset = +!o.skipHeader; var ws/!*:Worksheet*!/ = _ws || ({}); if(!_ws && dense) ws["!data"] = []; var _R = 0, _C = 0; if(ws && o.origin != null)
    sheet_get_cell : ƒ ws_get_cell_stub(ws/!*:Worksheet*!/, R, C/!*:?number*!/)/!*:Cell*!/ { /!* A1 cell address *!/ if(typeof R == "string")
    sheet_new : ƒ sheet_new(opts)
    sheet_set_array_formula : ƒ sheet_set_array_formula(ws/!*:Worksheet*!/, range, formula/!*:string*!/, dynamic/!*:boolean*!/)
    sheet_to_csv : ƒ sheet_to_csv(sheet/!*:Worksheet*!/, opts/!*:?Sheet2CSVOpts*!/)/!*:string*!/ { var out/!*:Array<string>*!/ = []; var o = opts == null ? {} : opts; if(sheet == null || sheet["!ref"] == null) return ""; var r = safe_decode_range(sheet["!ref"]); var FS = o.FS !== undefined ? o.FS : ",", fs = FS.charCodeAt(0); var RS = o.RS !== undefined ? o.RS : "\n", rs = RS.charCodeAt(0); var endregex = new RegExp((FS=="|" ? "\\|" : FS)+"+$"); var row = "", cols/!*:Array<string>*!/ = []; var colinfo/!*:Array<ColInfo>*!/ = o.skipHidden && sheet["!cols"] || []; var rowinfo/!*:Array<ColInfo>*!/ = o.skipHidden && sheet["!rows"] || []; for(var C = r.s.c; C <= r.e.c; ++C) if (!((colinfo[C]||{}).hidden)) cols[C] = encode_col(C); var w = 0; for(var R = r.s.r; R <= r.e.r; ++R)
    sheet_to_formulae : ƒ sheet_to_formulae(sheet/!*:Worksheet*!/)/!*:Array<string>*!/ { var y = "", x, val=""; if(sheet == null || sheet["!ref"] == null) return []; var r = safe_decode_range(sheet['!ref']), rr = "", cols/!*:Array<string>*!/ = [], C; var cmds/!*:Array<string>*!/ = []; var dense = sheet["!data"] != null; for(C = r.s.c; C <= r.e.c; ++C) cols[C] = encode_col(C); for(var R = r.s.r; R <= r.e.r; ++R)
    sheet_to_html : ƒ ()
    sheet_to_json : ƒ sheet_to_json(sheet/!*:Worksheet*!/, opts/!*:?Sheet2JSONOpts*!/)
    sheet_to_row_object_array : ƒ sheet_to_json(sheet/!*:Worksheet*!/, opts/!*:?Sheet2JSONOpts*!/)
    sheet_to_txt : ƒ sheet_to_txt(sheet/!*:Worksheet*!/, opts/!*:?Sheet2CSVOpts*!/)
    split_cell : ƒ ()
    table_to_book : ƒ ()
    table_to_sheet : ƒ ()*/

    (async () => {
        /* Download from https://sheetjs.com/pres.numbers */
        const f = await fetch("https://sheetjs.com/pres.numbers");
        console.log('f:', f); //二进制文件
/*
f: Response {type: 'cors', url: 'https://sheetjs.com/pres.numbers', redirected: false, status: 200, ok: true, …}
body : (...)
bodyUsed : true
headers : Headers {}
ok : true
redirected : false
status : 200
statusText : ""
type : "cors"
url : "https://sheetjs.com/pres.numbers"
[[Prototype]] : Response
*/

        const ab = await f.arrayBuffer();
        console.log('ab:', ab);
/*
ArrayBuffer(652655)
byteLength : 652655
detached : false
maxByteLength : 652655
resizable : false
[[Prototype]] : ArrayBuffer
[[Int8Array]] : Int8Array(652655)
[[Uint8Array]] : Uint8Array(652655)
[[ArrayBufferByteLength]] : 652655
[[ArrayBufferData]] : 16746
*/

        /* parse */
        const wb = read(ab);
        console.log('wb:',wb);
/*
wb: {SheetNames: Array(1), Sheets: {…}, Workbook: {…}, bookType: 'numbers'}
SheetNames : ['Sheet1']
Sheets : {Sheet1: {…}}
Workbook : {WBProps: {…}}
bookType : "numbers"
*/

        /* generate array of presidents from the first worksheet */
        const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
        console.log('ws:',ws);
/*
ws: {!ref: 'A1:B6', A1: {…}, B1: {…}, A2: {…}, B2: {…}, …}
!ref : "A1:B6"
A1 : {t: 's', v: 'Name', w: 'Name'}
A2 : {t: 's', v: 'Bill Clinton'}
A3 : {t: 's', v: 'GeorgeW Bush'}
A4 : {t: 's', v: 'Barack Obama'}
A5 : {t: 's', v: 'Donald Trump'}
A6 : {t: 's', v: 'Joseph Biden'}
B1 : {t: 's', v: 'Index', w: 'Index'}
B2 : {t: 'n', v: 42}
B3 : {t: 'n', v: 43}
B4 : {t: 'n', v: 44}
B5 : {t: 'n', v: 45}
B6 : {t: 'n', v: 46}
*/

        const data = utils.sheet_to_json(ws); // generate objects
        console.log('data:', data);
/*
data: (5) [{…}, {…}, {…}, {…}, {…}]
0 : {Name: 'Bill Clinton', Index: 42, __rowNum__: 1}
1 : {Name: 'GeorgeW Bush', Index: 43, __rowNum__: 2}
2 : {Name: 'Barack Obama', Index: 44, __rowNum__: 3}
3 : {Name: 'Donald Trump', Index: 45, __rowNum__: 4}
4 : {Name: 'Joseph Biden', Index: 46, __rowNum__: 5}
length : 5
*/

        /* get state data and export to XLSX */
        function exportFile(rows) {
            const ws = utils.json_to_sheet(rows);
            const wb = utils.book_new();
            utils.book_append_sheet(wb, ws, "Data");
            writeFileXLSX(wb, "SheetJSVueAoO.xlsx");
        }
        exportFile(data);
    })()
</script>


</body>
</html>